<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片廊</title>
	<style>
		div.img {
			border:1px solid #0000ff;
			margin:2px;
			height:auto;
			width:auto;
			text-align: center;
			float:left;
		}
		/** 嵌套选择器 适用于选择器内部的选择器的样式。 所有div中class="img"的div 下面的img标签 样式 */
		div.img img {
			display:inline;
			margin:3px;	
			border:1px solid #ffffff;
		}
		div.img a:hover img {
			border:1px solid #0000ff;	
		}
		div.desc {
			background-color:#FF80C0;
			width:120px;
			text-align:center;	
			margin:2px;
			font-weight:normal;
		}
	</style>
</head>

<body>
		<div class="img">
       <a target="_blank" href="klematis_big.htm">
          <img src="images/klematis_small.jpg" alt="Klematis" width="110" height="90">
       </a>
    <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     	<a target="_blank" href="klematis2_big.htm">	
        	<img src="images/klematis2_small.jpg" alt="Klematis" width="110" height="90">
        </a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     	<a target="_blank" href="klematis3_big.htm">
        	<img src="images/klematis3_small.jpg" alt="Klematis" width="110" height="90">
        </a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     	<a target="_blank" href="klematis4_big.htm">
        	<img src="images/klematis4_small.jpg" alt="Klematis" width="110" height="90">
        </a>
     <div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
